import React, { useEffect, useState } from 'react'
import { NavBar, Card, Tag, IndexBar, List,SearchBar } from 'antd-mobile'
import { LocationFill } from 'antd-mobile-icons'
import http from '../../api/http'

const City = () => {

  const [cityList, setCityList] = useState([])
  const [hotList, setHotList] = useState([])
  const [SearchList,setSearchList]=useState([])
  const [hitList,setHitList]=useState([])

  const getData = async () => {
    const res = await http.get("/api/city")
    console.log(res.data.data);
    setCityList(res.data.data.city)
    setHotList(res.data.data.hotCities)
  }
  useEffect(() => {
    getData()
  }, [])
  return (
    <div>
      <NavBar>
        <SearchBar placeholder='请输入关键词'/>
      </NavBar>
      <Card title={<div>当前城市:<LocationFill /> <span>{hotList.length > 0 && hotList[0].name}</span></div>}>
      </Card>

      <Card title="热门城市">
        {
          hotList.length > 0 &&
          hotList.map((v, i) => {
            return <Tag key={i} style={{ margin: 5 }}>{v.name}</Tag>
          })
        }
      </Card>

      <Card title="城市列表">
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {cityList.length > 0 && cityList.map((v, i) => {
              return (
                <IndexBar.Panel
                  index={v.initial}
                  title={`${v.initial}`}
                  key={`${v.initial}`}
                >
                  <List>
                    {v.list.map((item, index) => (
                      <List.Item key={index}>{item.name}</List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              )
            })}
          </IndexBar>
        </div>
      </Card>
    </div>
  )
}

export default City
